<template>
  <a-row style="margin-top: 20px" justify="center">
    <a-col :span="6">
      <a-card>
        <template #cover>
          <img alt="头像" :src="user.avatar" />
        </template>
        <a-card-meta>
          <template #title> 用户名：{{ user.username }} </template>
          <template #description> 自我介绍：{{ user.brief }} </template>
        </a-card-meta>
      </a-card>
    </a-col>
    <a-col :span="13" offset="1">
      <a-card>
        <a-card-meta title=" Bot "> </a-card-meta>
        <a-button
          class="editable-add-btn"
          style="margin: 10px 0px"
          @click="visible = true"
        >
          增加
        </a-button>

        <a-modal
          v-model:visible="visible"
          title="新增Bot"
          width="100%"
          ok-text="确认"
          cancel-text="取消"
          @ok="add_bot()"
          @cancel="clearfrom()"
        >
          <a-form :model="formState" name="nest-messages">
            <a-form-item label="标题">
              <a-input
                placeholder="请输入标题"
                v-model:value="formState.bot.title"
              />
            </a-form-item>

            <a-form-item label="简介">
              <a-input
                placeholder="请输入简介"
                v-model:value="formState.bot.description"
              />
            </a-form-item>

            <a-form-item label="代码">
              <VAceEditor
                v-model:value="formState.bot.content"
                @init="editorInit"
                lang="c_cpp"
                theme="textmate"
                style="height: 300px"
                :options="{
                  enableBasicAutocompletion: true, //启用基本自动完成
                  enableSnippets: true, // 启用代码段
                  enableLiveAutocompletion: true, // 启用实时自动完成
                  fontSize: 14, //设置字号
                  tabSize: 2, // 标签大小
                  showPrintMargin: false, //去除编辑器里的竖线
                  highlightActiveLine: true,
                }"
              />
            </a-form-item>
          </a-form>
        </a-modal>

        <a-table :columns="columns" :data-source="dataSource">
          <template #headerCell="{ column }">
            <template v-if="column.key === 'title'">
              <span>
                <smile-outlined />
                标题
              </span>
            </template>
          </template>

          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <span>
                <a-button
                  type="primary"
                  style="margin-right: 8px; margin-bottom: 8px"
                  @click="edit_bot(record)"
                >
                  编辑
                </a-button>
                <a-popconfirm
                  title="你确定要删除该bot吗?"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="remove_bot(record.id)"
                >
                  <a-button>删除</a-button>
                </a-popconfirm>
              </span>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";
import { useStore } from "vuex";
import botApi from "@/apis/botApi";
import { onMounted } from "@vue/runtime-core";
import { VAceEditor } from "vue3-ace-editor";
import ace from "ace-builds";

import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-chrome";
import "ace-builds/src-noconflict/ext-language_tools";

export default {
  name: "BotView",
  components: {
    VAceEditor,
  },
  setup() {
    ace.config.set(
      "basePath",
      "https://cdn.jsdelivr.net/npm/ace-builds@" +
        require("ace-builds").version +
        "/src-noconflict/"
    );
    // ace.config.ShowPrintMargin(false);

    const store = useStore();

    const user = store.state.user.info;

    const visible = ref(false);

    const formState = reactive({
      bot: {
        id: "",
        title: "",
        description: "",
        content: "",
      },
    });

    let dataSource = ref([
      {
        id: "",
        title: "",
        description: "",
        createTime: "",
      },
    ]);

    const columns = ref([
      {
        title: "标题",
        dataIndex: "title",
        key: "title",
        ellipsis: true,
      },
      {
        title: "描述",
        dataIndex: "description",
        key: "description",
        ellipsis: true,
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime",
        sorter: {
          compare: (a, b) => (a > b ? 1 : -1),
          multiple: 2,
        },
        showSorterTooltip: false,
      },
      {
        title: "功能",
        dataIndex: "action",
        key: "action",
      },
    ]);

    onMounted(() => {
      get_bots();
    });

    const get_bots = () => {
      botApi.getBots(user.access).then((resp) => {
        dataSource.value = resp.data.bots;
      });
    };

    const edit_bot = (bot) => {
      formState.bot.id = bot.id;
      formState.bot.title = bot.title;
      formState.bot.description = bot.description;
      formState.bot.content = bot.content;
      visible.value = true;
    };

    const remove_bot = (bot_id) => {
      botApi.deleteBot(bot_id, user.access).then((resp) => {
        if (resp.code === 200) {
          get_bots();
        }
      });
    };

    const clearfrom = () => {
      formState.bot.title = "";
      formState.bot.description = "";
      formState.bot.content = "";
    };

    const add_bot = () => {
      if (formState.bot.id) {
        botApi.updateBot(formState.bot, user.access).then((resp) => {
          if (resp.code === 200) {
            visible.value = false;
            get_bots();
            clearfrom();
          }
        });
      } else {
        botApi.addBot(formState.bot, user.access).then((resp) => {
          if (resp.code === 200) {
            visible.value = false;
            get_bots();
            clearfrom();
          }
        });
      }
    };

    return {
      user,
      visible,

      dataSource,
      columns,
      formState,

      clearfrom,
      get_bots,
      edit_bot,
      remove_bot,
      add_bot,
    };
  },
};
</script>

<style scoped>
</style>